
/*
  vw 根据viewport 视口来缩放    设计稿的元素宽度 / (设计稿的总宽度 / 100  )  = 最终的vw
  @W:750vw;  设计稿是 750 的
  @也可以使用vscode插件 px2vw  

  @W:750vw;
  @r: (@W/100) ;
  最终使用 ： 48/@r


    1vw等于屏幕宽度的1% 1vh等于屏幕高度的1%
    通常设计稿为750宽度，屏幕总宽度为100vw
    那么：
    100vw = 750px * 1px
    1px = 100 / 750
    1px就等于0.13333333vw 
    把单位放大100倍便于计算
     而rem 是根据html的font-size大小来计算的 

     计算公式 ： 1rem = 屏幕宽度/UI设计图宽度*100px 
       我们计算出iphone6屏幕宽度375：
        设计稿375px情况下 1rem=100px
        设计稿480px情况下 1rem=78.125px
        设计稿600px情况下 1rem=62.5px
        设计稿750px情况下 1rem=50px

        按iphone6屏幕尺寸，设计稿750px还原，让页面能够在其他尺寸下尽量显示正常

        css尺寸计算方式为：设计稿中元素尺寸/100rem
*/

@W:750vw;
@r: (@W/100) ; 

body {
    font-family: Microsoft YaHei, Arial;
}
*{
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

em, i {
    font-style: normal;
    font-weight: normal;
}

li {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #292929;
}

.layout{
    width:750 / @r;
}

.list{
    display: flex;
    flex-direction:column;
    width:694 / @r;
    border:2 / @r solid #fcc2a0;
    border-radius:2px;
    margin:0 auto;
    background: #fff;
}
.list .item{
    position: relative;
    display: flex;
    flex-direction:row;
    padding:28/ @r 0 14/@r;
    font-size:28/@r;
    border-bottom:1/@r solid #d2d2d2;
}
.list .item:last-child{
    border-bottom: none;
}

.list .item .title{
    width:482/@r;
    line-height: 42/@r;
}
.list .item span{
    color:#999;
    font-size:24/@r;
}
.list .item i{
    width:36 / @r;
    margin:0  4/@r 0 24/@r;
    box-sizing: border-box;
    color:#f52a40;
}
.list .item .indentify {
    position: absolute;
    right:14/@r;
    top:50%;
    margin-top: -17 /@r;
    padding:8/@r;
    font-size: 24 /@r;
    text-align: center;
    background: #ffe4e5;
    color:#e1474b;
    border-radius: 2 /@r;
}

